<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/orderset.css">
    <!-- 引入组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <style type="text/css">
        .tangram-suggestion-main {
            z-index: 99999999999;
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=pG2FlphLm9wxsAYR3wlgCr4svGi2aLVT"></script>

</head>
<body class="hold-transition">
<!--<div id="allmap"></div>-->

<div id="app">

    <!--头信息-->
    <div class="content-header">
        <h1>地图管理
            <small>公司地址</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>地图管理</el-breadcrumb-item>
            <el-breadcrumb-item>公司地址</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!--头信息/-->
    <div class="app-container">
        <div class="box">

            <template>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane  label="分布图" name="first">

                        <iframe id="update" frameborder="0" src="map.html" width="1500px" height="500px"></iframe>
                     <!--   <div id="allmap2"></div>-->

                    </el-tab-pane>
                    <el-tab-pane label="详细信息" name="second">

                        <div class="filter-container">
                            <el-input placeholder="公司地址" v-model="pagination.queryString" style="width: 200px;"
                                      class="filter-item"></el-input>
                            <el-button @click="findPage()" class="dalfBut">查询</el-button>
                            <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
                        </div>
                        <!--分页数据-->
                        <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                            <el-table-column type="index" align="center" label="序号"></el-table-column>
                            <el-table-column prop="name" label="公司名称" align="center"></el-table-column>
                            <el-table-column prop="address" label="公司地址" align="center"></el-table-column>
                            <el-table-column prop="lon" label="所在经度" align="center"></el-table-column>
                            <el-table-column prop="lat" label="所在纬度" align="center"></el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <!--scope.row代表当前行的对象-->
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--分页条-->
                        <div class="pagination-container">
                            <el-pagination
                                    class="pagiantion"
                                    @current-change="handleCurrentChange"
                                    :current-page="pagination.currentPage"
                                    :page-size="pagination.pageSize"
                                    layout="total, prev, pager, next, jumper"
                                    :total="pagination.total">
                            </el-pagination>
                        </div>
                        <!--新增-->
                        <div class="add-form"><!--v-if="dialogFormVisible" :visible.sync="dialogFormVisible"-->
                            <el-dialog style="width: 1500px;margin-left: 0px;" v-if="dialogFormVisible"
                                       :visible.sync="dialogFormVisible" @opened="showMap" title="新增地址">
                                <!--   <iframe frameborder="0" src="map2.html" width="100%" height="350px"></iframe>-->
                                <div id="r-result">
                                    <el-input type="text" id="suggestId" size="20" v-model="info.address"
                                              style="height: 10%; width: 300px;"
                                              class="filter-item">
                                    </el-input>
                                    <el-button type="primary" class="butT" @click="handleAdd()">确定添加</el-button>
                                    <div id="searchResultPanel"
                                         style="border:1px solid #C0C0C0;width:150px;height:auto;z-index: 1000;display: none"></div>
                                </div>


                                <div style="width: 710px;height: 376px;margin-top: 5px" id="allmap"></div>


                            </el-dialog>
                            <!--  <template>-->


                            <!-- </template>-->
                        </div>
                    </el-tab-pane>



                </el-tabs>
            </template>

        </div>
    </div>
</div>


</body>

<script type="text/javascript">

    //获取地址
    let address;
    //获取名称
    let name;
    //获取经纬度
    let lon;
    let lat;




    new Vue({
        el: '#app',
        data: {
            info:
                {
                    address: "",
                    name: "",
                    lon: "",
                    lat: ""
                }
            ,
            activeName: 'first',
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 4,//每页显示的记录数
                total: 0,//总记录数
                queryString: null//查询条件
            },
            dialogFormVisible: false,//增加表单是否可见
            dataList: [],
        },
        created() {//在vue初始化时调用
            this.findPage();
        },
        mounted() {

        },
        updated() {

        },
        methods: {
            showMap() {


                if (this.dialogFormVisible == true) {
                    // 百度地图API功能
                    function G(id) {
                        return document.getElementById(id);
                    }

                    var map = new BMap.Map("allmap");
                    let point = new BMap.Point(104.075587, 30.668473)
                    map.centerAndZoom(point, 11);                   // 初始化地图,设置城市和地图级别。
                    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
                        {
                            "input": "suggestId"
                            , "location": map
                        });
                    ac.addEventListener("onhighlight", function (e) {  //鼠标放在下拉列表上的事件
                        var str = "";
                        var _value = e.fromitem.value;
                        var value = "";
                        if (e.fromitem.index > -1) {
                            value = _value.province + _value.city + _value.district + _value.street + _value.business;
                        }
                        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

                        value = "";
                        if (e.toitem.index > -1) {
                            _value = e.toitem.value;
                            value = _value.province + _value.city + _value.district + _value.street + _value.business;
                        }
                        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
                        G("searchResultPanel").innerHTML = str;
                    });
                    var myValue;


                    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
                        var _value = e.item.value;
                        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;

                        //获取地址
                        address = _value.province + _value.city + _value.district + _value.street;
                        console.log(address)
                        //获取名称
                        name = _value.business
                        console.log(name)
                        G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
                        setPlace();
                    });

                    function setPlace() {
                        map.clearOverlays();    //清除地图上所有覆盖物
                        function myFun() {
                            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                            lon = pp.lng;
                            console.log(lon)
                            lat = pp.lat;
                            console.log(lat)
                            map.centerAndZoom(pp, 18);
                            map.addOverlay(new BMap.Marker(pp));    //添加标注
                        }

                        var local = new BMap.LocalSearch(map, { //智能搜索
                            onSearchComplete: myFun
                        });

                        local.search(myValue);
                    }
                }

            },
            handleClick() {

                $("#update").attr("src","map.html")

            }
            ,
            handleCreate() {
                this.dialogFormVisible = true;
            }
            ,
            handleAdd() {
               /* console.log(address + "--" + name + "--" + lon + "--" + lat)*/

                let info = {
                    address: address,
                    name: name,
                    lon: lon,
                    lat: lat
                }
                console.log(info)
                this.dialogFormVisible = false;
                //发送axios
                axios.post("/address/add.do",info).then(resp=>{
                    if(resp.data.flag){
                        this.$message({
                            message: resp.data.message,
                            type: 'success'
                        });
                        this.findPage()
                    }else {
                        this.$message.error(resp.data.message)
                    }
                })
            }
            ,
            //分页查询
            findPage(isCustom) { //参数:表示是否定制当前页

                //debugger;
                //0.判断是从查询按钮调用此方法
                if (!isCustom) {//无惨:默认重置当前页
                    //将当前页码重置为1
                    this.pagination.currentPage = 1;
                }

                //console.log("hello findPage!");//测试
                //1.封装参数,当前页,每页尺寸,查询条件
                let para = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString
                };


                //2.发送ajax请求
                axios.post("/address/findPage.do", para).then(res => {
                    //获取返回结果{total:100,rows:[行数据]},赋值给分页模型
                    this.pagination.total = res.data.total;
                    this.dataList = res.data.rows;//赋值表数据
                }).catch(err => {
                    console.log(err);
                }).finally();
            }
            ,
            //切换页码
            handleCurrentChange(currentPage) {//当前页更改时回调函数
                //currentPage为新的当前页
                //1.修改当前页数据
                this.pagination.currentPage = currentPage;
                //2.调用分页查询方法
                this.findPage(1); //使用自定义当前页
            }
            ,

            handleDelete(row) {//row为当前行json对象
                //确认框
                this.$confirm('确认删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {//点确认,回调
                    //发送ajax请求
                    axios.get("/address/delAddress.do?id="+row.id).then(resp=>{
                        if(resp.data.flag){
                            this.$message({
                                message: resp.data.message,
                                type:"success"
                            })
                            this.findPage()
                        }else {
                            this.$message.error(resp.data.message)
                        }
                    })
                    }).catch(() => {//点取消,回调
                    //取消框
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
        },


    })


</script>
</html>